// Standard colors to reuse instead of renaming variables.
$opaque-black-1: rgba(0, 0, 0, 0.12);
$opaque-black-2: rgba(0, 0, 0, 0.1);
$opaque-black-3: rgba(0, 0, 0, 0.05);
$opaque-black-4: rgba(0, 0, 0, 0.15);
$opaque-black-5: rgba(0, 0, 0, 0.1);
$opaque-black-6: rgba(0, 0, 0, 0.4);
$opaque-black-7: rgba(0, 0, 0, 0.2);
$opaque-black-8: rgba(0, 0, 0, 0.6);
$opaque-black-9: rgba(0, 0, 0, 0.06);

$opaque-white-1: rgba(255, 255, 255, 0.25);

$opaque-grey: rgba(60, 60, 60, 0.26);

$opaque-yellow: rgba(255, 187, 64, 0.07);

$light-grey-1: #f9f9f9;
$light-grey-2: #f2f4fa;
$light-grey-3: #e0e0e0;
$light-grey-4: #e8e8e8;
$light-grey-5: #f0f0f0;
$light-grey-6: #dadada;
$light-grey-7: #c7c7c7;
$light-grey-8: #e2e2e2;
$light-grey-9: #f1f1f1;
$light-grey-10: #b1b1b1;
$light-grey-11: #c5c5c5;
$light-grey-13: #eee;
$light-grey-14: #cecece;
$light-grey-15: rgba(0, 0, 0, 0.1);
$light-grey-17: #f3f3f3;
$light-grey-18: #566679;
$light-grey-19: #eaeaea;
$light-grey-20: #c6c6c6;
$light-grey-21: #979797;

$light-blue-1: #5a78f0;
$light-blue-2: #96a8b6;
$light-blue-3: #476081;
$light-blue-4: #25b0e8;
$light-blue-5: #00b3db;
$light-blue-6: #b2bfc9;
$light-blue-7: #6d89a6;
$light-blue-8: #435d77;
$light-blue-9: #eef4fc;
$light-blue-10: #a3b7cf;
$light-blue-11: #e2e6ee;
$light-blue-12: #e5eff4;

$light-purple-1: #7070e3;
$light-purple-2: #dfdffb;

$light-violet-1: #5c74eb;

$light-orange: #f37240;
$light-orange-1: #f5a623;
$light-orange-2: #ffa500;
$light-orange-3: #fff6e6;

$light-yellow-1: #ffb235;
$light-yellow-2: rgba(255, 178, 53, 0.3);
$light-yellow-3: #ffbb40;
$light-yellow-4: #f8a910;

$light-green-1: #f2fafa;
$light-green-2: #6f0;
$light-green-3: #37ce76;
$light-green-4: #f1fafa;
$light-green-5: #00bfa4;
$light-green-6: #c9f2ed;
$light-green-7: #cff0f5;
$light-green-8: #6ad0d9;

$mew-green: #05c0a5;

$white: #fff;
$black: #000;

$dark-yellow: #dadd98;

$red-1: #f00;
$red-2: #ff2f49;
$red-3: #b92b3f;
$red-4: #ff3c3c;
$red-5: #ff122f;
$red-6: #a70015;
$red-7: #e96071;
$red-8: #f9d6da;
$red-9: #ff445b;
$red-10: #ff4070;
$red-11: #ee4e62;

$light-red-1: #fbe0e3;

$grey-1: #adadad;
$grey-3: #3766aa;

$orange-1: #ef945d;

$dark-grey-1: #434f61;
$dark-grey-2: #536d8b;
$dark-grey-3: #4c4c4c;
$dark-grey-4: #6b87a3;
$dark-grey-5: #444;
$dark-grey-6: #afafaf;
$dark-grey-7: #989898;
$dark-grey-8: #888;
$dark-grey-9: #555;
$dark-grey-10: #8a8a8a;
$dark-grey-11: #999;
$dark-grey-12: rgba(0, 0, 0, 0.7294117647058823);
$dark-grey-13: #d8d8d8;

$dark-blue-1: #506175;
$dark-blue-2: #0b2840;
$dark-blue-4: #677890;
$dark-blue-5: #434f60;
$dark-blue-6: #003945;
$dark-blue-7: #0c5876;
$dark-blue-8: #485f7e;
$dark-blue-9: #354858;
$dark-blue-10: #1d89ff;
$dark-blue-11: #003b46;
$dark-blue-12: #334758;

$dark-green-1: #008000;
$dark-green-2: #00927d;
$dark-green-3: #3f9c00;
$dark-green-4: #05c034;

// Brand colors
$aka: #aa0087;
$clo: #009241;
$egem: #0e97c0;
$ella: #046111;
$eosc: #926565;
$esn: #a16bff;
$etc: #009241;
$eth: $light-grey-3;
$etho: #d63068;
$etsc: #4295d1;
$exp: #673ab7;
$go: #27223d;
$kov: #adc101;
$music: #fece00;
$pirl: #a2d729;
$poa: #4568bb;
$rin: #adc101;
$rop: #adc101;
$tomo: #6a488d;
$ubq: #00ad85;
$cust: #b50085;
$thundercore: #ffc000;
$solidum: #1e87f0;
$dexon: #954a97;
$ere: #3a6ea7;

// *********************************************************************
// Standard window width sizes
// *********************************************************************
$tablet-width: 1024px;
$mobile-width: 414px;
$nft-mobile-width: 700px;

// *********************************************************************
// TX-interfaces window width sizes
// *********************************************************************
$interface--mobile-side-menu--width: 1270px;

// *********************************************************************
// Box Shadow color styles
// *********************************************************************
$box-shadow-color-1: $opaque-black-1;
$box-shadow-color-2: $opaque-black-2;
$news-block-box-shadow-color: $opaque-black-3;
$topbanner-block-box-shadow-color: $opaque-black-4;
$tiny-header-shadow-color: $opaque-black-5;
$language-flag-box-shadow: $opaque-black-6;
$language-menu-box-shadow: $opaque-black-1;

$notification-dot-background-color: $red-1;

// *********************************************************************
// Elements background color styles
// *********************************************************************
// This background color used for most of the elements background
$background-color-1: $light-grey-1; // Lite grey background color
$background-color-2: $mew-green; // Green background color
$background-color-3: $light-grey-2; // Team page background
$background-color-4: $light-grey-5;
$background-color-5: $opaque-white-1;
$background-color-6: $light-green-1;
$background-color-7: $light-green-4;
$background-color-white: $white;
$background-color-black: $black;
$nav-tab-background-color: $white;
$nav-tab--progress-bar-background-color: $background-color-2;
$about-mew-spaceman-background-color: $dark-blue-2;
$create-wallet-background-color: $light-blue-1;
$unlock-wallet-background-color: $background-color-2;
$footer-background-color: $dark-blue-2;
$price-bar-background-color: $light-blue-3;
$bootstrap-modal-header-background-color: $dark-grey-1;

$transaction-block-address: $light-purple-1;
$transaction-block-balance: $light-blue-1;
$transaction-block-network: $light-blue-4;
$transaction-block-token-search: $dark-grey-2;

$button-background-color-1: $dark-grey-4;
$button-active-background-color: $light-grey-15;
$small-tooltip-shadow: $opaque-black-5;
$menu-under-background-color: $dark-grey-12;

// *********************************************************************
// Social button styles
// *********************************************************************
$social-button-color-1: $grey-1; // News block social buttons

// *********************************************************************
// Border styles
// *********************************************************************
$border-color-1: $light-grey-3;
$border-color-2: $white;
$border-color-3: $black;
$border-color-4: $light-grey-1;
$border-color-5: $light-grey-4;
$border-color-6: $light-grey-2;
$price-bar-border-color: $dark-blue-4;
$border-bottom--mnemonic-phrase-key-color: $border-color-1;
$border-bottom--mnemonic-phrase-key-color-verification: $dark-blue-5;
$border-green: $mew-green;

// *********************************************************************
// z-index values
// *********************************************************************
$z-base: 0;
$z-base-top: 5;
$z-banner-animation: 10;
$z-menu: 100;
$z-tooltip: 500;
$z-bootstrap-modal-backdrop: 600;
$z-bootstrap-modal: 601;

// *********************************************************************
// Text styles
// *********************************************************************
$text-base-color: $dark-blue-1;
$text-white: $white;
$text-black: $black;
$text-color-1: $white; // White text color
$text-color-2: $mew-green; // Green text color
$text-color-3: $dark-grey-11;
$text-color-4: $dark-grey-2;
$text-color-5: $red-2; // create-wallet footer text color
$text-color-6: $dark-blue-6;
$text-color-7: $dark-grey-5;
$text-color-8: $dark-blue-7;
$text-color-9: $light-grey-6;
$text-color-red: $red-1;
$text-color-news-content: $text-color-3;
$text--tooltip-color: $dark-grey-3;
$text--link-color: $text-color-2;
$text--mnemonic-phrase-key-color: $text-color-6;
$text--mnemonic-phrase-index-color: $text-color-3;
$text--footer-link-color: $light-blue-2;
$text-color-green: $text-color-2;
$text-side-menu-inactive-color: $light-grey-7;
$text-good-button-not-good: $light-grey-8;

$link-text-color-1: $dark-blue-1;
$link-text-color-2: $mew-green;
$link-text-color-3: $dark-grey-6;

// *********************************************************************
// Button styles
// *********************************************************************
$button--text-color-1: $white;
$button--border-color-1: $white;
$button--border-color-2: $mew-green;
$button--background-color-1: $mew-green;
$button--background-color-1-dark: $dark-green-2;
$button--background-color-2: $white;
$button--background-color-3: $dark-grey-7;
$button--background-color-4: $light-blue-1;

// *********************************************************************
// Custom scroll bar style
// *********************************************************************
$scrollbar--track-color: $light-grey-9;
$scrollbar--handle-color: $dark-grey-8;
$scrollbar--handle-hover-color: $dark-grey-9;

// *********************************************************************
// [Bootstrap] Dropdown language menu style
// *********************************************************************
$dropdown-menu-border-color: $light-grey-10;
$dropdown-menu--active--background-color: $light-grey-4;

// *********************************************************************
// [Bootstrap] Tooltip style
// *********************************************************************
$tooltip-font-color: $dark-grey-3;
$tooltip-box-shadow-color: $opaque-black-7;
$tooltip-box-shadow-color2: $opaque-black-8;
$tooltip-border-color: $light-grey-11;
$tooltip-background-color: $white;
$tooltip--button-background-color: $light-blue-2;
$tooltip--button-font-color: $white;

// *********************************************************************
// [Bootstrap] Nav tab style
// @ Create Wallet pages
// *********************************************************************
$nav-tab-background-color: $white;
$nav-tab--button-background-color: $light-grey-3;
$nav-tab--button--active--background-color: $dark-grey-1;
$nav-tab--button--active--font-color: $white;
$nav-tab--progress-bar-background-color: $mew-green;

// *********************************************************************
// CSS Toggle Button(Switch) style
// *********************************************************************
$css-toggle-button--slider-background-color: $light-grey-3;
$css-toggle-button--button-background-color: $mew-green;

$css-toggle-button--slider--active--background-color: $background-color-2;

$disabled: $dark-grey-11;

$very-weak: $red-4;
$weak: $dark-blue-10;
$strong: $mew-green;
$very-strong: $dark-green-1;

// *********************************************************************
// Padding, Margin sizes
// *********************************************************************
$interface-text-padding-1: 0 8px;
